<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Pisces","version":"8.7.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="/js/config.js"></script>
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/page/2/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/page/2/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"en","comments":"","permalink":"","path":"page/2/index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Hexo</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Hexo</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-首页"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-分类"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">John Doe</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">20</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">12</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
  </nav>
</div>



          </div>
        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/19/JAVASCRIPT%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/19/JAVASCRIPT%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/" class="post-title-link" itemprop="url">javascript 基础</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-19 09:20:05" itemprop="dateCreated datePublished" datetime="2020-12-19T09:20:05+08:00">2020-12-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/js%E5%9F%BA%E7%A1%80/" itemprop="url" rel="index"><span itemprop="name">js基础</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="js-基础"><a href="#js-基础" class="headerlink" title="js 基础"></a>js 基础</h2><h4 id="隐式转换"><a href="#隐式转换" class="headerlink" title="隐式转换"></a>隐式转换</h4><ol>
<li>‘2’<strong>——</strong>‘0’ 可以将字符串转换为数字。（减号）</li>
<li>‘2’+ ‘2’可以进行字符串拼接<a href="siyuan://blocks/20210111162709-1bwitvs">“大数相加”</a></li>
</ol>
<h4 id="symbol"><a href="#symbol" class="headerlink" title="symbol:"></a>symbol:</h4><ol>
<li>可以用来定义一个绝对唯一的常量，避免命名冲突。就是<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let s2 = Symbol(&#x27;another symbol&#x27;)</span><br><span class="line">let s3 = Symbol(&#x27;another symbol&#x27;)</span><br></pre></td></tr></table></figure></li>
<li>模拟私有变量，就是通过这个定义的属性是私有的，类似于之前通过立即执行函数，来实现的一个私有变量((20210228094815-czyjstw “闭包是如何来实现这个私有变量的”))。</li>
</ol>
<h3 id="如何来区分数据类型"><a href="#如何来区分数据类型" class="headerlink" title="如何来区分数据类型"></a>如何来区分数据类型</h3><p><a target="_blank" rel="noopener" href="https://www.jb51.net/article/99698.htm">typeof instance of</a>。</p>
<p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/89238840">数据类型参考</a>。</p>
<ol>
<li>看到这个类型（type）就联想到了这个，类型。type of instanceof</li>
<li>typeof  弊端就是只能区分简单类型的数据，对于复杂数据数组和对象都是 object 然后 typeof null= ‘<strong>object</strong>‘  (lao 老人)type of <strong>NaN</strong> = ‘<strong>number</strong>‘ (nn)。</li>
<li>instance of 就是对于 基本数据类型无法判断，并且只能判断无法返回具体的数据类型。//<a target="_blank" rel="noopener" href="https://www.imooc.com/article/69870">instanceof 弊端</a>。它不能返回具体的数据类型。</li>
<li><strong>Object</strong>.prototype.<strong>tostring.call(1)</strong> // [ <strong>o</strong>bject <strong>N</strong>umber ]//更完美。</li>
<li>补充 Object.prototype.<strong>tostring.call(1)<strong>原理：其实 Array, Boolean 也有一个 toString 方法，但是这个仅是转为字符串的,Object 上的 tostring 才是能够真正返回数据类型的，</strong>易错</strong>：不是 Array 上的，我第一次记得是 Array 原型上的不对是顶层 Object 的方法，Array 类上的方法是改写过的，搞错了。<a target="_blank" rel="noopener" href="https://blog.csdn.net/hanyanshuo/article/details/104620122">Object.propotype.tostring.call</a></li>
<li>对于数组还可以用 **Array.isArray()**判断是否是一个数组。</li>
<li>如何来判断这个引用类型–》数组或是对象，就是通过这个 instance of，object.prototype.toString.call().来判断</li>
</ol>
<h3 id="valueof-和-toString"><a href="#valueof-和-toString" class="headerlink" title="valueof 和 toString"></a>valueof 和 toString</h3><ol>
<li><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/7cb41d109b7e">valueof 和 tostring 区别</a>.</li>
<li>value of 对于 Number string Boolean 显示其值，其它都是自身</li>
<li>tostring 除过这个 object {} 等为其类型，其它均为值，比如这个[].tostring=== ‘ ‘.</li>
<li>对待 隐式转换牵扯 布尔值的 首先需要：将布尔值转为 0/1  之后对另一个值调用 valueof()  之后再去调用 tostring() 花括号像不像{ }  显示为本身 之后 再去调用这个 number() 转为值这样 最终再去比较。</li>
</ol>
<h3 id="类数组"><a href="#类数组" class="headerlink" title="类数组"></a>类数组</h3><ol>
<li><p>具有数组的长度，但是没有数组的方法，比如通过这个 queryselectAll  在调用 <code>getElementsByTagName</code> 和 <code>document.childNodes</code> 方法时，它们返回的 <code>NodeList</code> 对象都属于伪数组。返回的是一个类数组，通过调用 new set() 所形成的也是一个类数组</p>
<h4 id="问题是怎么来转换这个数组，主要通过这个：slice-call-方法的补充。"><a href="#问题是怎么来转换这个数组，主要通过这个：slice-call-方法的补充。" class="headerlink" title="问题是怎么来转换这个数组，主要通过这个：slice.call 方法的补充。"></a>问题是怎么来转换这个数组，主要通过这个：<a target="_blank" rel="noopener" href="https://www.imooc.com/article/281593">slice.call 方法的补充</a>。</h4><p>1：**Array.from()**。<br>2: <strong>Array.prototype.slice.call(类数组)</strong>//就是首先 slice 会返回一个数组，然后 call 调用这个方法，然后改变 slice 里的 this,将其替换为类数组。</p>
</li>
</ol>
<h3 id="requetAnimationFrame-js-动画"><a href="#requetAnimationFrame-js-动画" class="headerlink" title="requetAnimationFrame-js 动画"></a>requetAnimationFrame-js 动画</h3><ol>
<li>这个是 js 动画用的，就是来控制动画的更新频率为 60hz/s,</li>
<li>settimeout 是手动来控制的而 raf 是浏览器自动控制的</li>
<li>浏览器如果切换到后台了，那么 raf 会停止，而 settimeout 会继续执行。<strong>节省资源</strong></li>
<li>而且用 settimeout 还得算时间.</li>
<li><a target="_blank" rel="noopener" href="https://cloud.tencent.com/developer/article/1633898">在页面渲染前再取调用 requetAnimationFrame</a>.</li>
<li>我们来分析一下，为什么要在重新渲染前去调用？因为 <code>rAF</code> 是官方推荐的用来做一些流畅动画所应该使用的 API，做<strong>动画不可避免的会去更改 DOM，</strong>而如果在渲染之后再去更改 DOM，那就只能等到下一轮渲染机会的时候才能去绘制出来了，这显然是不合理的。<br><code>rAF</code> 在浏览器决定渲染之前给你最后一个机会去改变 DOM 属性，然后很快在接下来的绘制中帮你呈现出来，所以这是做流畅动画的不二选择。下面我用一个 <code>setTimeout</code> 的例子来对比。</li>
<li>这样记忆。就是 <strong>r—&gt; 渲染</strong>前去调用，所以，就是渲染后调用，又会触发 dom 的更新，就白渲染了。</li>
</ol>
<h3 id="模块规范（commonJS、es6-、AMD、CMD）"><a href="#模块规范（commonJS、es6-、AMD、CMD）" class="headerlink" title="模块规范（commonJS、es6 、AMD、CMD）"></a>模块规范（commonJS、es6 、AMD、CMD）</h3><ol>
<li><a target="_blank" rel="noopener" href="https://coding.imooc.com/lesson/320.html#mid=38779">commonjs 和 es6 之间的区别</a>。<a target="_blank" rel="noopener" href="https://www.cnblogs.com/chenwenhao/p/12153332.html">AMD CMD 区别</a><br>1。 <strong>联想</strong>记忆（看到这个 commonjs,就想这个<strong>来</strong>，此处联想自己的项目，就是<strong>执行</strong>时，才引入，而 es6 module ,就是执行代码逻辑上应该是，<strong>先编译</strong>，后执行，所以 commonjs 是执行，时引入，那 es6 就是编译时引入，然后 <strong>c</strong>md 也是，执行时加载依赖，amd 是提前加载依赖）,ES6 是支持这个异步的，（e 异步）<br>2：后端： commonjs 是执行时引入，而这个 ES6Module 是这个静态时引入编译时引用，自己理解就是，es6 比如我 vue3 的项目中全部都用的是 es6 映入放在 script 标签的最外部，如果在使用的时候再去用会报错，编译阶段就要引入完成，而不是等执行 js 语句的时候再去引用了，然后这个 commonjs 就是动态，按需用， 哪里需要再引用。<br>3 ：就是这个 path.resolve 取绝对路径,webpack entry 就是要用到这个绝对路径，join 就是这个相对路径</li>
<li>但是 commonjs 是同步的，如果网络请求出现了阻塞那么就会导致这个页面阻塞，所以运用这个 CMD 和 AMD （addvance)，就是 提前定义加载所有依赖，CMD 是需要时再加载依赖.</li>
<li>你觉得 CommonJS 为什么不能做 Tree-Shaking ?,就是 Webpack 打包阶段还没有</li>
<li><strong>A</strong>MD | 速度快 | 会浪费资源 | <strong>预先加载</strong>所有的依赖，直到使用的时候才执行<br><strong>C</strong>MD | 只有真正需要才加载依赖 | 性能较差 | 直到<strong>使用</strong>的时候才定义依赖。</li>
<li>```js<ul>
<li>‘123’ = 123<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">6. 特点：最终结果一定是一个数字类型。</span><br><span class="line"></span><br><span class="line">[相关参考链接](https://www.imooc.com/article/281312)</span><br><span class="line"></span><br><span class="line">### 跨域</span><br><span class="line"></span><br><span class="line">有 JSONP 进行跨域。</span><br><span class="line"></span><br><span class="line">**误区**：跨域是浏览器的限制，其实在**服务端**这里，或者说服务端之间压根就没有同源限制的问题。所以，服务端这里应该是有自己得处理方式。</span><br><span class="line"></span><br><span class="line">nginx 进行跨域。//其实本质就是现在把两个域同一到一个域上了， 自然就可以实现跨域了</span><br><span class="line"></span><br><span class="line">#### CORS 跨域</span><br><span class="line"></span><br><span class="line">* CORS 中，如果没有响应头，那么数据会返回吗 --不会，为什么，因为只有返回 Access-control-allow-orgin</span><br><span class="line"></span><br><span class="line">- CORS 中，options 会发起几次</span><br><span class="line"></span><br><span class="line">* CORS 设置 cookie 的请求头是什么？</span><br><span class="line"></span><br><span class="line">[跨域知识.emmx](assets/Ajax-20210326113411-cmq3puv.emmx)</span><br><span class="line"></span><br><span class="line">### 数组方法</span><br><span class="line"></span><br><span class="line">#### weakmap weakset</span><br><span class="line"></span><br><span class="line">1. [weakmap weakset](https://mp.weixin.qq.com/s?__biz=MzA4Nzg0MDM5Nw==&amp;mid=2247492665&amp;idx=2&amp;sn=67d9d9aa7b626255c758d25d6da9bb09&amp;chksm=9031e7dba7466ecdf40e506b256a67fc6c7d548162949411ac2031cc530cb48f1755f278a90b&amp;mpshare=1&amp;scene=23&amp;srcid=0301OFYj4hmtGCIMJ6MwQZc5&amp;sharer_sharetime=1614568505112&amp;sharer_shareid=5c4cb3b03822fd6d2d2de99001875f93#rd).</span><br><span class="line">2. 首先联想这个 weak 是弱的意思，弱应用，就是键是弱引用类型，具体来讲就是一旦这个引用断开，或者说改变了地址的时候就会去销毁这个 value 值，再具体，点就是 key=null;key=new Array() 这样就可以，让 v8 引擎判断这个键值对可以销毁了。防止内存泄漏。//不是特别的理解 ❓。 （叙述的思路就是，弱应用的键，一旦断开或着改变，就会被自动回收。）</span><br><span class="line">3. join(&#x27;&amp;&#x27;)//[&quot;&#123;&#123;.text&#125;&#125;&quot;](siyuan://blocks/20210118233627-4bsg5lo)</span><br><span class="line"></span><br><span class="line">   &gt; ###### 1.join()</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; `join()` 方法用于把数组中的所有元素转换一个字符串。</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 元素是通过指定的分隔符进行分隔的。默认使用逗号作为分隔符</span><br><span class="line">   &gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>var arr = [1,2,3];<br>console.log(arr.join());   // 1,2,3<br>console.log(arr.join(“-“));   // 1-2-3<br>console.log(arr);   // [1, 2, 3]（原数组不变）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">通过 **join()方法可以实现重复字符串** ，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>function repeatString(str, n) {<br>//一个长度为n+1的空数组用string去拼接成字符串,就成了n个string的重复<br> return new Array(n + 1).join(str);<br>}<br>console.log(repeatString(“abc”, 3));   // abcabcabc<br>console.log(repeatString(“Hi”, 5));   // HiHiHiHiHi</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">  .就是将数组转换为字符串。里面的元素并以参数相隔开。[&quot;&#123;&#123;.text&#125;&#125;&quot;](siyuan://blocks/20210130225956-l66vn5n)</span><br><span class="line"></span><br><span class="line">### 手写 JSONP 的实现</span><br><span class="line"></span><br><span class="line">### 思路</span><br><span class="line"></span><br><span class="line">**编码记忆**：这个题怎么样，去编码记忆，首先这个 js 就是 **script**，**o** 就是 window,p 就是 **params.**以及 **push** 这样简化记忆量</span><br><span class="line"></span><br><span class="line">1. 就是由于这个是一个异步的请求，所以需要用这个 promise,来做；</span><br><span class="line">2. ...解构的应用： 与对象去使用就是在将里面所有可遍历的属性，进行拷贝。</span><br><span class="line">3. for in 用来循环对象的属性的  let key  for   in  object; key 就是对象里面的键；</span><br><span class="line">4. join 的用法就是说这个，将里面的值以什么来分割。</span><br><span class="line">5. 这个方法的弊端.</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>   function JSONP({ url, params, callback }) {</p>
<pre><code> return new Promise((resolve, reject) =&gt; &#123;
   let script = document.createElement(&#39;script&#39;)
   window[callback] = function (data) &#123;
     resolve(data)
     document.body.removeChild(script)//就是类似于我在做哪个全局loading组件的时候用到的添加节点就是往这个body里添加。

   &#125;
   let arr = []
   params = &#123; ...params, callback &#125; // a=1&amp;callback=s
   for (let key in params) &#123;
     arr.push(`$&#123;key&#125;=$&#123;params[key]&#125;`)
   &#125;
   script.src = `$&#123;url&#125;?$&#123;arr.join(&#39;&amp;&#39;)&#125;`
   document.appendChild(script)

 &#125;)
</code></pre>
<p>   }</p>
<p>   JSONP({</p>
<pre><code> url: &#39;https://loacl:2000&#39;,
 params: &#123; a: 1 &#125;,
 callback: &#39;s&#39;
</code></pre>
<p>   }<br>   ).then(data =&gt; {</p>
<pre><code> console.log(data);
</code></pre>
<p>   })</p>
   <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">  .中用到了这个方法。</span><br><span class="line">4. **set**: 就是集合，没有重复的元素，只要往里通过.add() 方法去添加元素。//并且 set 所返回的集合是一个((20210301093600-q2nch5q &quot;类数组&quot;))。所以需要转为真正的数组。((20210301093600-q2nch5q &quot;类数组转换&quot;))。</span><br><span class="line">5. push / **unshift** 这个 API 就是 push 的反向操作首先应该联想到这个 ushift.</span><br><span class="line">6. every:就是执行回调针对每一个元素，并且都通过，回调函数里的条件</span><br><span class="line">7. slice 和 splice 的区别： 就是，slice 是截取数组，**并不修改原数组**，splice，更像是拿刀看断数组，splice(2,3)从第二个元素开始，移除多个元素，并返回包含移除元素的数组。修改原数组。</span><br><span class="line">8. **split**（&quot; &quot;）将字符串转为数组。slice 是返回某个子区间， splice 是切割数组并返回子区间，也就是说会影响到原来的数组。</span><br><span class="line">9. map 和 for each 的一个区别。</span><br><span class="line"></span><br><span class="line">### 如何来看待 JavaScript</span><br><span class="line"></span><br><span class="line">1. JavaScript 借鉴了很多语言的特性，比如 C 语言的基本语法、**Java 的类型系统和内存管理**、Scheme 的函数作为**一等公民**，还有 **Self 基于原型（prototype）的继承机制**。毫无疑问，JavaScript 是一门非常优秀的语言，特别是“原型继承机制”和“函数是一等公民”这两个设计。JavaScript 的设计思想不过 JavaScript 也是一门处处是坑的语言，由于历史原因，很多错误的或者不合理的设计都被延续至今，比如使用 **new 加构造函数**来创建对象，这种方式的背后隐藏了太多的细节，非常容易增加代码出错概率，而且也大大增加了新手的学习成本；再比如初期的 JavaScript 没有块级作用域机制，使得 JavaScript 需要采取变量提升的策略，而变量提升又是非常反人性的设计。还有就是**不太适合大型项目，因为项目中变量类型错误的情况**，**动态类型**，执行时才检测数据类型的问题，所以才产生了 ts 尤其是接口的概念，减少了数据类型的问题。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">### NaN</span><br><span class="line"></span><br><span class="line">#### Number.isNaN() / IsNaN</span><br><span class="line"></span><br><span class="line">[isnan 链接参考](https://blog.csdn.net/weixin_33901641/article/details/91476575)。</span><br><span class="line"></span><br><span class="line">1. 为什么引入： NAN!==NAN 我没有办法去判断一个数值是不是 NAn</span><br><span class="line">2. 易错点就是说这个是判断不是数字的变为 true,是数字的为 false.</span><br><span class="line">3. isNan :原理是转换为数值类型(isNan)，然后再去判断是否为 NAN，**不能转换为数值型的都为 NAN**,所以对于这个，‘**aa’字符串也是一个 NAN **对于 undefined 由于也能转为这个 NAN,所以**不精确。**（联想记忆：s（is you 是你吗，数值，））</span><br><span class="line">4. Number.NaN() 不转类型，严格判断 NAN 类型，是 NAN 的那就为 true，其它都为 false.</span><br><span class="line"></span><br><span class="line">### js 栈和堆</span><br><span class="line"></span><br><span class="line">个人理解就是**简单**数据类型，都放在**栈**中，**复杂数**据类型对象的地址存放在栈中，在**堆中存储这个对象的值。**</span><br><span class="line"></span><br><span class="line">1. 如果是 **let a=1  a=&#x27;scx&#x27;** 对于简单数据类型的仅重新赋值，不会去开辟空间。</span><br><span class="line">2. **谁块**：栈块，因为栈先进后出的数据结构更加的简单，栈是编译时系统自动分配空间（也可以理解为栈的弊端），而堆是**动态分配**（运行时分配空间），所以栈的速度快。并且每次访问用类型数据都是先访问栈里的对象的引用，然后再去找堆里的对象。所以步骤多了，慢。</span><br><span class="line">3. 堆更大——联系进程--》[&quot;堆和栈与进程和线程的关系&quot;](siyuan://blocks/20210311213115-9fsgiey)</span><br><span class="line"></span><br><span class="line">### 线程之间哪些资源共享，哪些不共享</span><br><span class="line"></span><br><span class="line">1 .标识线程的线程 ID，栈空间是私有的的，堆空间是共享的，**全局变量**是共享的。由于线程相当于一个函数，那你想想，不同函数之间是不是在共享了全局的作用域。</span><br><span class="line"></span><br><span class="line">2. **栈：** 是个线程**独有**的，保存其运行状态和局部自动变量的。</span><br><span class="line">3. 堆   由于**堆**是在进程空间中开辟出来的，所以它是理所当然地被**共享**的。</span><br><span class="line">4. 那也就是说堆更大，因为线程是在进程上的，所以堆更大。((20210228115154-v6pcd1u &quot;栈和堆与进程之间的联系&quot;))。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  #### **js 数组为什么不需要去分配固定的空间**</span><br><span class="line"></span><br><span class="line">  1. [v8 如何来实现这个 js 的数组](https://juejin.cn/post/6844903943638794248#heading-12)。</span><br><span class="line">  2. js 里的**数组**是一个特殊的**对象**，为什么数组长度可变，为什么这个数组可以存储多个类型数据，因为是一个对象。**快数组**是一种线性的存储方式。新创建的空数组，默认的存储方式是快数组，快数组**长度是可变**的，可以根据元素的增加和删除来动态调整存储空间大小，内部是通过扩容和收缩机制实现，**慢数组**是用类似**哈希表**的形式创建的。</span><br><span class="line">  3. 如果 v8 引擎发现数组内部出现了大量空洞，就是比如 arr=[1,3] arr[1222]=1 ,那就转为慢数组，因为不需要去申请大量连续空间，但是是以一种 hash 表来展示的。</span><br><span class="line">  4. 慢转快；就是这个，js 数组的空洞少的时候就会去转换，这就是为什么 js 不需要分配固定长度的本质原因。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">### 内存泄漏</span><br><span class="line"></span><br><span class="line">1. 内存泄漏相关问题[内存泄漏问题](https://www.imooc.com/read/70/article/1616)。</span><br><span class="line">  1. 对于那些 ```</span><br></pre></td></tr></table></figure>
<p>function neicun (){<br> a=1<br>}<br>//在js中如果没有声明直接赋值，会将这个变量提至全局对象，那gcroot不就可以访问到了吗，自然也没办法清除了</p>
</blockquote>
</li>
</ul>
</li>
</ol>
<pre><code>  <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">2. 定时器忘清除了，那也就是说这个防抖和节流，如果不注意清除定时器，这就会导致内存泄漏的问题了。</span><br><span class="line"></span><br><span class="line">### 10. null 和 undefined 的区别是什么</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</code></pre>
<p>console.log(null==undefined)//true//注意这个是双等号，就是隐式转换了</p>
<p>console.log(null===undefined)//false</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">`null`： Null 类型，代表“空值”，代表一个空对象指针</span><br><span class="line"></span><br><span class="line">`undefined`： Undefined 类型，当一个声明了一个变量未初始化时，得到的是 undefined</span><br><span class="line"></span><br><span class="line">undefined 表示“缺少值”，此处应该有一个值，但是还没有定义。</span><br><span class="line"></span><br><span class="line">![](assets/20210301221950-o93v758.png)</span><br><span class="line"></span><br><span class="line">null 表示“没有对象”，该处不应该有值。</span><br><span class="line"></span><br><span class="line">![](assets/20210301221950-sc04w69.png)</span><br><span class="line"></span><br><span class="line">### 遍历 for of for in</span><br><span class="line"></span><br><span class="line">1. for in 遍历的是键，也就是索引号，而且会遍历继承的属性，一般会配合 hasOwnPropoty,来去除从原型链上继承的属性，有的对象里的值会继承至原型链上的，比如 obj =&#123;a:1&#125;,Object.propotype.b=1,obj.b=1,这样不就不是自身的吗。//[hasOwnProperty](https://blog.csdn.net/weixin_33682790/article/details/91479156).</span><br><span class="line">2. 所以这个联系[&quot;深拷贝&quot;](siyuan://blocks/20210306094012-ly4dgoq)</span><br><span class="line"></span><br><span class="line">   &gt; ### 思想</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 1. 复盘第一次判断传入参数是不是一个对象造成了混乱，应该是判断不是一个数组或对象，并且对象为空，我当时还用了 type of 判断空，其实不对，应该是直接参数等于 Null 就行，typeof 还得为一个 object ,之后用 instance of 来判断这个元素是不是这个数组，对象，做对应的处理，并且这里要用到这个递归，为什么，因为对象里面有可能去嵌套一个对象， 那么递归式，先去处理第一层的逻辑，就是直接赋值，如果还有值，那就重复逻辑，给它套一个递归，这样它就可以去继续判断里面的对象。</span><br><span class="line">   &gt; 2. 我还卡在了 这个 **for in** 循环上其实这个不管是数组，还是对象都可以用到这个，并且遍历的是键，也就是索引值，并且要配合这个 hasOwnPropoty 来剔除从原型链上继承的属性。</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; ### 深浅拷贝的区别</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 1. 如果数组元素是**基本类型**，就会拷贝一份，互不影响，而如果是**对象或数组**，就会只拷</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化，我们</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 把这种复制引用的拷贝方法称为浅拷贝，（补充：引用类型： 你可以理解为地址，就是对于对象复制的是引用，这样你修改值的话，就会通过引用，去修改堆中的内存）</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也互相分离，修改一个对象</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; 的属性，不会影响另一个。</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; ``` js</span><br><span class="line">   &gt; a = &#123;</span><br><span class="line">   &gt;   a: 1,</span><br><span class="line">   &gt;   b: &#123;</span><br><span class="line">   &gt;     a: 1</span><br><span class="line">   &gt;   &#125;</span><br><span class="line">   &gt; &#125;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; function deepclone(obj) &#123;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;   if (obj !== null &amp;&amp; typeof obj !== &#x27;object&#x27;) &#123;</span><br><span class="line">   &gt;     throw new TypeError(&#x27;必须是数组或对象，并且不能为空&#x27;)</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;   &#125;</span><br><span class="line">   &gt;   let res = []</span><br><span class="line">   &gt;   if (obj instanceof Array) &#123;</span><br><span class="line">   &gt;     res = []</span><br><span class="line">   &gt;   &#125; else &#123;</span><br><span class="line">   &gt;     res = &#123;&#125;</span><br><span class="line">   &gt;   &#125;</span><br><span class="line">   &gt;   for (key in obj) &#123;</span><br><span class="line">   &gt;     if (obj.hasOwnPropoty(obj[key])) &#123;</span><br><span class="line">   &gt;       continue</span><br><span class="line">   &gt;     &#125;</span><br><span class="line">   &gt;     res[key] = deepclone(obj[key]) //对于这个递归的逻辑还是不清楚</span><br><span class="line">   &gt;   &#125;</span><br><span class="line">   &gt;   return res</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; &#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepCopy</span>(<span class="params">obj, cache = <span class="keyword">new</span> <span class="built_in">WeakMap</span>()</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!obj <span class="keyword">instanceof</span> <span class="built_in">Object</span>) <span class="keyword">return</span> obj</span><br><span class="line">  <span class="comment">// 防止循环引用   if (cache.get(obj)) return cache.get(obj)</span></span><br><span class="line">  <span class="comment">// 支持函数   if (obj instanceof Function) &#123;</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      obj.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 支持日期   if (obj instanceof Date) return new Date(obj)</span></span><br><span class="line">  <span class="comment">// 支持正则对象   if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)</span></span><br><span class="line">  <span class="comment">// 还可以增加其他对象，比如：Map, Set等，根据情况判断增加即可，面试点到为止就可以了 </span></span><br><span class="line">  <span class="comment">// 数组是 key 为数字素银的特殊对象   const res = Array.isArray(obj) ? [] : &#123;&#125;</span></span><br><span class="line">  <span class="comment">// 缓存 copy 的对象，用于处理循环引用的情况   cache.set(obj, res)</span></span><br><span class="line"></span><br><span class="line">  <span class="built_in">Object</span>.keys(obj).forEach(<span class="function">(<span class="params">key</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (obj[key] <span class="keyword">instanceof</span> <span class="built_in">Object</span>) &#123;</span><br><span class="line">      res[key] = deepCopy(obj[key], cache)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      res[key] = obj[key]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> res</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 测试 const source = &#123;</span></span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;Jack&#x27;</span>,</span><br><span class="line">  <span class="attr">meta</span>: &#123;</span><br><span class="line">    <span class="attr">age</span>: <span class="number">12</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">&#x27;1997-10-10&#x27;</span>),</span><br><span class="line">    <span class="attr">ary</span>: [<span class="number">1</span>, <span class="number">2</span>, &#123; <span class="attr">a</span>: <span class="number">1</span> &#125;],</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;Hello&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">source.source = source</span><br><span class="line"><span class="keyword">const</span> newObj = deepCopy(source)</span><br><span class="line"><span class="built_in">console</span>.log(newObj.meta.ary[<span class="number">2</span>] === source.meta.ary[<span class="number">2</span>]); </span><br></pre></td></tr></table></figure>

</blockquote>
<p>   。<br>3. <a target="_blank" rel="noopener" href="https://blog.csdn.net/w390058785/article/details/80522383">for of 和 for in</a>.<br>4. 那你觉得 foreach 和 for of 两个效率如何？为什么？</p>
<h3 id="es6"><a href="#es6" class="headerlink" title="es6"></a>es6</h3><h4 id="…-运算符号"><a href="#…-运算符号" class="headerlink" title="… 运算符号"></a>… 运算符号</h4><ol>
<li>… 第一个作用可以将数组转换为 …[1,2]= 1,2 ;写 bind 扁平化迭代实现。</li>
<li>正因为这个特点，可以去重一层数组.</li>
<li>还可以去拷贝一份数组，就是在迭代中实现数组扁平化中用到</li>
<li>还可以去合并两个数组 […arr1,…arr2]。</li>
</ol>
<h4 id="let-const-var"><a href="#let-const-var" class="headerlink" title="let const var"></a>let const var</h4><ol>
<li>这个看到 var 就想到了变量提升—》那就是说这个全局执行上下文的创建阶段和执行阶段两者<strong>不同步</strong>。</li>
<li>而 let const 就是让两者时机同步了</li>
<li>同时，let const 有了作用域的概念就是说—》同时有了<strong>暂时性死区</strong>，避免在定义之前去使用这个变量。</li>
<li>const 的理解就是，它是一开始就确定了它的地址，也就意味着，你可以去改变引用所指向的值，但是你无法去改变它的地址，无法去覆盖，const arr=[1,2,4,]  arr=[2] ,这个会改变这个变量的地址所以不可以。</li>
</ol>
<h3 id="和-区别"><a href="#和-区别" class="headerlink" title="==  和===区别"></a>==  和===区别</h3><ol>
<li><pre><code>a=&#123;a:1&#125;
b=&#123;b:1&#125;
</code></pre>
</li>
</ol>
<p>a==b a===b  都是 false</p>
<h3 id="window-onload-和-window-Domcontentloaded"><a href="#window-onload-和-window-Domcontentloaded" class="headerlink" title="window.onload 和 window.Domcontentloaded"></a>window.onload 和 window.<strong>Dom</strong>contentloaded</h3><ol>
<li>其实主要区别就是 onload 事件触发时，所有资源加载完毕。</li>
<li>而 <strong>dom</strong>content 故名思意其实就时，仅 <strong>dom</strong> 构建完毕就可以去执行了。</li>
</ol>
<h2 id="易混淆知识点"><a href="#易混淆知识点" class="headerlink" title="易混淆知识点"></a>易混淆知识点</h2><ol>
<li>return ：直接跳出当前的方法,返回到该调用的方法的语句处,继续执行,在循环的语句中是去，直接返回了外部的函数。</li>
<li>break：在循环体内结束整个循环过程</li>
<li>continue ：结束本次的循环，直接进行下一次的循环.</li>
</ol>
<h3 id="let-const-var-区别"><a href="#let-const-var-区别" class="headerlink" title="let const var 区别"></a>let const var 区别</h3><ol>
<li>const arr = [1,2,3]<br>arr.push(4);//可以<br>arr.splice(1);。//可以<br>arr[1] = 3;//可以<br>arr = [1,2,3];//改地址，不可以<br>arr = [2,3];//改地址，不可以</li>
<li>谁可以满足允许// const.</li>
<li>const 基础数据类型不可以修改，复杂数据类型，是可以修改的，主要通过找对应得应用所指向得地址，然后修改堆中的数据.</li>
<li>本质是应用类型是可以更改，但是<strong>不可以改</strong>变地址，也就是说不可以去重新赋值，这样会改变它的地址。const <strong>地址</strong>一定是从一开始就<strong>确定</strong>的。</li>
</ol>
<h3 id="位数"><a href="#位数" class="headerlink" title="位数"></a>位数</h3><ol>
<li>32 位和 64 位意思是处理器一次能处理的最大位数。</li>
</ol>
<h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3><ol>
<li>首先它的 this 指向，不会被更改，为什么不会被更改，原因就在于，始终继承于外部的代码块。自生是没有这个 this 的，所以</li>
<li>没有原型对象，类比普通函数，它有 prototype 指向了它的原型对象，但是箭头函数压根就没有这个原型对象。</li>
<li>它自生其实是没有这个 arguements 的，可以利用这个…rest（<strong>剩余</strong>运算符）参数做替代，其实原理就是你调用箭头函数然后去传递参数的时候，将其展开，然后再去，收集。</li>
<li>首先这个思维的路径就是，由箭头联想这个 this,然后由函数想这个原型。</li>
</ol>
<hr>
<ol>
<li><strong>打桩记忆</strong>： 箭头      函数。</li>
<li><strong>箭头</strong>—》thi<strong>s</strong> 指向—》 arguement<strong>s</strong>—-&gt; 怎么替代，re<strong>s</strong>t 剩余参数（sss）.</li>
<li>由<strong>函数</strong>想到  函数的原型对象，它是不具备的。–》自然也没有办法用 new.）为什么不能用 New ，没有 this.无法指向实例化的对象，并且没有办法使实例化的隐式原型对象指向这个箭头函数原型对象，因为压根就没有）。</li>
<li>补充：可以用 apply,bind,call,吗可以用，但是 this，不会被更改，因为压根自生就没有 this.</li>
</ol>
<h3 id="0-1-0-2-0-3"><a href="#0-1-0-2-0-3" class="headerlink" title="0.1 + 0.2 !=0.3"></a>0.1 + 0.2 !=0.3</h3><ol>
<li><strong>由 3 看着像不像 ，镜像 E</strong> 想到了，IEEE754(你们三个人气死我了)，js 采取了其中的 64 位双精度，由于小数，转二进制有无限循环位，而 64 位又由这个 1 位符号位，11 位指数位，52 位的有效位，无法容纳无限循环的小数。</li>
<li>怎么解决，通过这个 parseFloat(a.toFixed(4)) tofixed 是为一个字符串，所以通过 parsefloat 转为数字。</li>
<li>其实从这里看出，其 js 最大整数的范围将是这个，-2^53 — 2 ^53  ,从这个角度来讲不适合大数运算，引出了 Big int 就是对于超出限制的大数，也可以正常存储。</li>
<li>解释一下二进制浮点数运算过程。</li>
</ol>
<h3 id="addEventlistener-和-onclick-的区别"><a href="#addEventlistener-和-onclick-的区别" class="headerlink" title="addEventlistener 和 onclick 的区别"></a>addEventlistener 和 onclick 的区别</h3><ol>
<li>由 on 想到了 one 0–&gt; 唯一，同一对象，绑定多次，会覆盖也就是说只执行一次。</li>
<li>但是 addEventListener 可以绑定多个事件都执行。</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/15/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/15/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6/" class="post-title-link" itemprop="url">垃圾回收机制</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-15 14:20:05" itemprop="dateCreated datePublished" datetime="2020-12-15T14:20:05+08:00">2020-12-15</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/v8%E5%BC%95%E6%93%8E/" itemprop="url" rel="index"><span itemprop="name">v8引擎</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="垃圾回收机制"><a href="#垃圾回收机制" class="headerlink" title="垃圾回收机制"></a>垃圾回收机制</h1><h2 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h2><h3 id="为什么要分类—依据"><a href="#为什么要分类—依据" class="headerlink" title="为什么要分类—依据"></a>为什么要分类—依据</h3><ul>
<li><p>代际假说</p>
<ul>
<li><p>一些变量生存周期很短</p>
<ul>
<li>存放在新生代区域</li>
</ul>
</li>
<li><p>一些比如window这些存活时间很长的对象</p>
<ul>
<li>存放在老生代区域</li>
</ul>
</li>
<li><p>依据生存周期的长短–因地制宜的选取对应的算法来回收</p>
</li>
</ul>
</li>
</ul>
<h3 id="堆-划分的"><a href="#堆-划分的" class="headerlink" title="堆/划分的"></a>堆/划分的</h3><ul>
<li><p>目的就是为了能根据不同的对象依据对应的垃圾回收机制，进行回收</p>
</li>
<li><p>新生代</p>
<ul>
<li><p>存储生存周期短的对象</p>
</li>
<li><p>区域划分依据scanverge算法</p>
<ul>
<li>对象区域</li>
<li>空闲区域</li>
</ul>
</li>
</ul>
</li>
<li><p>老生代</p>
<ul>
<li>专门存储，生存周期长的对象</li>
</ul>
</li>
</ul>
<h3 id="主垃圾回收器"><a href="#主垃圾回收器" class="headerlink" title="主垃圾回收器"></a>主垃圾回收器</h3><ul>
<li><p>专门处理老生代里的对象</p>
</li>
<li><p>算法</p>
<ul>
<li>标记–整理</li>
<li>标记–清除</li>
</ul>
</li>
<li><p>步骤</p>
<ul>
<li><p>先进行标记–对于清除的对象先进行标记</p>
</li>
<li><p>利用标记–整理算法将活动对象，全部移动到一端</p>
<ul>
<li><p>这一步的意义是什么</p>
<ul>
<li>因为随着你频繁删除堆里所存储的对象，必然会导致内存空间不连续</li>
<li>这个是让内存空间尽可能的连续</li>
</ul>
</li>
</ul>
</li>
<li><p>再去清除除过这一端的其它垃圾数据</p>
</li>
</ul>
</li>
</ul>
<h3 id="副垃圾回收机制"><a href="#副垃圾回收机制" class="headerlink" title="副垃圾回收机制"></a>副垃圾回收机制</h3><ul>
<li><p>scanverge算法</p>
</li>
<li><p>专门处理新生代里存储的对象</p>
</li>
<li><p>步骤</p>
<ul>
<li><p>利用标记—清除算法清除对象区域里标记的垃圾数据</p>
</li>
<li><p>在标记–清除阶段将活动对象复制到空闲区域，并进行整理</p>
<ul>
<li>为的就是能够使存储空间尽可能的连续</li>
</ul>
</li>
<li><p>对象区域和空闲区域调换</p>
</li>
</ul>
</li>
</ul>
<h2 id="首先来明确一下什么样的变量的空间可以被回收"><a href="#首先来明确一下什么样的变量的空间可以被回收" class="headerlink" title="首先来明确一下什么样的变量的空间可以被回收"></a>首先来明确一下什么样的变量的空间可以被回收</h2><h3 id="依赖可访问性算法"><a href="#依赖可访问性算法" class="headerlink" title="依赖可访问性算法"></a>依赖可访问性算法</h3><h3 id="通过GCroot对象遍历内部所有对象"><a href="#通过GCroot对象遍历内部所有对象" class="headerlink" title="通过GCroot对象遍历内部所有对象"></a>通过GCroot对象遍历内部所有对象</h3><ul>
<li>window</li>
<li>Dom节点</li>
</ul>
<h3 id="通过GCroot-对象访问变量"><a href="#通过GCroot-对象访问变量" class="headerlink" title="通过GCroot 对象访问变量"></a>通过GCroot 对象访问变量</h3><ul>
<li><p>可访问到的：活动对象</p>
</li>
<li><p>不可访问：非活动对象</p>
<ul>
<li>V8引擎清除的将是非活动对象</li>
</ul>
</li>
</ul>
<h2 id="在早期有一个局限性较大的垃圾回收机制"><a href="#在早期有一个局限性较大的垃圾回收机制" class="headerlink" title="在早期有一个局限性较大的垃圾回收机制"></a>在早期有一个局限性较大的垃圾回收机制</h2><h3 id="引用计数法"><a href="#引用计数法" class="headerlink" title="引用计数法"></a>引用计数法</h3><ul>
<li><p>它具体是怎么做的</p>
<ul>
<li><p>每产生一个引用就计数加一</p>
<ul>
<li><p>什么是引用？</p>
</li>
<li><p>那它的局限性在哪</p>
<ul>
<li>它无法识别循环引用的场景，无法使计数为0; eg:A对象的引用指向B，而B的引用又指向A，它们的引用计数都是1，无法成为0, 就会造成内存泄漏；</li>
</ul>
</li>
</ul>
</li>
<li><p>为0就会被回收</p>
</li>
</ul>
</li>
</ul>
<h2 id="切入点由数据类型说起"><a href="#切入点由数据类型说起" class="headerlink" title="切入点由数据类型说起"></a>切入点由数据类型说起</h2><h3 id="基本数据类型"><a href="#基本数据类型" class="headerlink" title="基本数据类型"></a>基本数据类型</h3><ul>
<li>symbol</li>
<li>number</li>
<li>string</li>
<li>布尔类型</li>
</ul>
<h3 id="复杂数据类型"><a href="#复杂数据类型" class="headerlink" title="复杂数据类型"></a>复杂数据类型</h3><ul>
<li>function</li>
<li>对象</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/01/V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AE%B5%E4%BB%A3%E7%A0%81/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/01/V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AE%B5%E4%BB%A3%E7%A0%81/" class="post-title-link" itemprop="url">V8引擎执行代码</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-01 21:43:45" itemprop="dateCreated datePublished" datetime="2020-12-01T21:43:45+08:00">2020-12-01</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/v8%E5%BC%95%E6%93%8E/" itemprop="url" rel="index"><span itemprop="name">v8引擎</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="V8-引擎如何执行一段代码"><a href="#V8-引擎如何执行一段代码" class="headerlink" title="V8 引擎如何执行一段代码"></a>V8 引擎如何执行一段代码</h2><h3 id="编译阶段"><a href="#编译阶段" class="headerlink" title="编译阶段"></a>编译阶段</h3><ol>
<li><p>那在执行一段代码执行之前，得做些准备工作，（你做事情不也得需要做准备工作吗），具体就是需要准备<strong>基础环境</strong>。</p>
</li>
<li><p>全局执行上下文，创建阶段，首先会创建一个全局对象window，创建一个this 然后让它指向这个window，之后为变量和函数分配空间/并且要为变量赋一个undefined，创建作用域链，全局作用域里面有全局变量，全局函数，想来存储对象，不得需要创建存储的空间吗/堆 —栈，事件循环系系统web-api。</p>
</li>
<li><p>那现在有了基础环境后，就可以来执行这个代码。</p>
</li>
<li><p>由于 v8 引擎并不识别代码，所以需要来，将其<strong>结构化</strong>， 转化为 <strong>AST 树</strong>，再<strong>最终转换为字节码</strong>，也就是说<strong>中间代码</strong>（介于 AST 和机器码中间的一种产物） ，但是 v8 引擎为了节省资源，它不会去将声明的函数内部的所有代码转换为中间代码。很<strong>懒惰</strong>，所以又称<strong>惰性解析</strong>，阶段。</p>
</li>
</ol>
<h3 id="执行阶段"><a href="#执行阶段" class="headerlink" title="执行阶段"></a>执行阶段</h3><ol>
<li>同时要说明一点由于 V8 引擎属于&amp;混合编译执行/解释执行，所以会有一个监控器，来判断是否有重复代码执行，如果有将其标记为热点代码，将其转换为二进制代码，当下次再次执行，解释器直接执行优化过的代码，提高效率</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/11/12/es6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/11/12/es6/" class="post-title-link" itemprop="url">Es6</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-11-12 17:20:05" itemprop="dateCreated datePublished" datetime="2020-11-12T17:20:05+08:00">2020-11-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/ex6/" itemprop="url" rel="index"><span itemprop="name">ex6</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="es6"><a href="#es6" class="headerlink" title="es6"></a>es6</h1><h2 id="promise-generator-async-await"><a href="#promise-generator-async-await" class="headerlink" title="promise/generator/async/await"></a>promise/generator/async/await</h2><h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><h3 id="是什么"><a href="#是什么" class="headerlink" title="是什么"></a>是什么</h3><ul>
<li>function的一种简化</li>
</ul>
<h3 id="何时用"><a href="#何时用" class="headerlink" title="何时用"></a>何时用</h3><ul>
<li>简化函数，凡是用到函数的时候就可以用</li>
</ul>
<h3 id="怎么用"><a href="#怎么用" class="headerlink" title="怎么用"></a>怎么用</h3><ul>
<li><p>无参数</p>
<ul>
<li>&lt;ol&gt;&lt;li&gt;（）=&gt;{&nbsp; &nbsp;}&lt;br&gt;&lt;/li&gt;&lt;/ol&gt;</li>
</ul>
</li>
<li><p>有多个参数时</p>
<ul>
<li><p>const&nbsp; fun=(a,b,c)=&gt;{&nbsp; return 函数体}</p>
<ul>
<li>注意要得到函数返回值别把return忘记</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h2><h3 id="什么是"><a href="#什么是" class="headerlink" title="什么是"></a>什么是</h3><ul>
<li>限制用户所输入的信息，的表达式</li>
</ul>
<h3 id="什么时候用"><a href="#什么时候用" class="headerlink" title="什么时候用"></a>什么时候用</h3><ul>
<li><p>表单验证</p>
</li>
<li><p>用户名输入的时候</p>
<ul>
<li>子主题</li>
</ul>
</li>
<li><p>对于密码验证的时候</p>
</li>
</ul>
<h3 id="怎么用-1"><a href="#怎么用-1" class="headerlink" title="怎么用"></a>怎么用</h3><ul>
<li><p>起止符</p>
<ul>
<li>^ 开始符号</li>
<li>&amp;结束符</li>
</ul>
</li>
<li><p>多选一符号</p>
<ul>
<li>[  ]</li>
</ul>
</li>
<li><p>组合符号 ^[^A-Z0-9${2,3} ]</p>
<ul>
<li>后面花括号代表的是从前面选2-3个元素；</li>
</ul>
</li>
</ul>
<h2 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h2><h3 id="块级作用域"><a href="#块级作用域" class="headerlink" title="块级作用域"></a>块级作用域</h3><ul>
<li><p>const</p>
<ul>
<li><p>这个和let的最大的区别就是，const不可以先只声明</p>
<ul>
<li><p>为什么</p>
<ul>
<li>const所定义的是一个定值，如果你只声明不赋值，如何做到是一个定值，感觉有点勉强</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>let </p>
<ul>
<li>Subtopic</li>
</ul>
</li>
<li><p>它首先解决了var变量提升的问题</p>
<ul>
<li>它怎么解决这个问题的，将全局执行上下文的创建阶段和执行阶段时机同步了所以不会再出现变量提升的问题</li>
<li>它还解决了，var没有作用域的问题</li>
</ul>
</li>
<li><p>由块级作用域，引发了一个问题就是暂时性死区</p>
<ul>
<li><p>什么时候会引发暂时性死区</p>
<ul>
<li><p>条件</p>
<ul>
<li>如果在一个块级作用域里存在let,那么此时let所处的作用域就会锁死</li>
</ul>
</li>
<li><p>一旦在变量let声明前,去使用就会为undefined</p>
</li>
<li><p>那我什么时候能用，只有到声明后才可以去使用let/或const所声明的变量</p>
</li>
<li><p>那具体暂时性死区是什么</p>
<ul>
<li>其实就是let/const声明前的代码区域（在块级作用域中）</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="var"><a href="#var" class="headerlink" title="var"></a>var</h3><ul>
<li><p>没有块级作用域</p>
<ul>
<li><p>那如果没有块级作用域会引发哪些问题</p>
<ul>
<li><p>在函数中用var声明的变量，函数外部可以访问，这个就很危险</p>
</li>
<li><p>也会引发变量提升的问题</p>
<ul>
<li>根据你在声明变量的时候，会出现执行上下文，而创建上下文的创建与执行阶段是不同步的所以造成了变量提升</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="this指向"><a href="#this指向" class="headerlink" title="this指向"></a>this指向</h2><h3 id="指向谁"><a href="#指向谁" class="headerlink" title="指向谁"></a>指向谁</h3><ul>
<li>在函数 的内部，</li>
</ul>
<h2 id=""><a href="#" class="headerlink" title=".  .   ."></a>.  .   .</h2><h3 id="实现对对象的深拷贝"><a href="#实现对对象的深拷贝" class="headerlink" title="实现对对象的深拷贝"></a>实现对对象的深拷贝</h3><h3 id="将数组转为由逗号隔开的序列，同时又可以实现拷贝"><a href="#将数组转为由逗号隔开的序列，同时又可以实现拷贝" class="headerlink" title="将数组转为由逗号隔开的序列，同时又可以实现拷贝"></a>将数组转为由逗号隔开的序列，同时又可以实现拷贝</h3><h3 id="传递形参时用"><a href="#传递形参时用" class="headerlink" title="传递形参时用"></a>传递形参时用</h3><ul>
<li>如果你并不知道参数有几个的时候？？？</li>
</ul>
<h2 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h2><h3 id="怎么用-2"><a href="#怎么用-2" class="headerlink" title="怎么用"></a>怎么用</h3><ul>
<li>需要从一些对象（也可解构多层嵌套对象）</li>
</ul>
<h3 id="说人话"><a href="#说人话" class="headerlink" title="说人话"></a>说人话</h3><ul>
<li><p>获取对象里的值</p>
<ul>
<li>根据对象里的键来获取值</li>
</ul>
</li>
</ul>
<h3 id="更高端大气"><a href="#更高端大气" class="headerlink" title="更高端大气"></a>更高端大气</h3><h2 id="怎样将类数组转为真正的数组"><a href="#怎样将类数组转为真正的数组" class="headerlink" title="怎样将类数组转为真正的数组"></a>怎样将类数组转为真正的数组</h2><h3 id="Array-from-类数组"><a href="#Array-from-类数组" class="headerlink" title="Array.from(类数组)"></a>Array.from(类数组)</h3><h3 id="除过es6以外还有什么方法"><a href="#除过es6以外还有什么方法" class="headerlink" title="除过es6以外还有什么方法"></a>除过es6以外还有什么方法</h3><ul>
<li><p>Array.prototype.slice( ).call(类数组）</p>
<ul>
<li>这个不理解</li>
</ul>
</li>
</ul>
<h2 id="Map（）"><a href="#Map（）" class="headerlink" title="Map（）"></a>Map（）</h2><h3 id="它解决了什么问题"><a href="#它解决了什么问题" class="headerlink" title="它解决了什么问题"></a>它解决了什么问题</h3><ul>
<li>专门用来存储键值对的</li>
</ul>
<h3 id="什么时候用一旦出现需要存储一对键值对，立刻首先想到Map这个数据结构"><a href="#什么时候用一旦出现需要存储一对键值对，立刻首先想到Map这个数据结构" class="headerlink" title="什么时候用一旦出现需要存储一对键值对，立刻首先想到Map这个数据结构"></a>什么时候用一旦出现需要存储一对键值对，立刻首先想到Map这个数据结构</h3><h3 id="那它有哪些方法"><a href="#那它有哪些方法" class="headerlink" title="那它有哪些方法"></a>那它有哪些方法</h3><ul>
<li><p>set(键，值）</p>
<ul>
<li>这个返回的是新的map数据结构，包含有新的设置的键值对</li>
</ul>
</li>
<li><p>has(键）</p>
<ul>
<li><p>返回值为布尔值</p>
<ul>
<li>目的是为了判断是否存在当前键//这个主要判断是否有对应的键</li>
</ul>
</li>
</ul>
</li>
<li><p>delete(键)</p>
<ul>
<li>删除键所对应的键值对</li>
</ul>
</li>
<li><p>get(键）</p>
<ul>
<li><p>这个是在获取键所对应的值</p>
<ul>
<li>这个在力扣第一题中用到它了</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="Set"><a href="#Set" class="headerlink" title="Set()"></a>Set()</h2><h3 id="一旦题目中涉及集合立刻想到set"><a href="#一旦题目中涉及集合立刻想到set" class="headerlink" title="一旦题目中涉及集合立刻想到set"></a>一旦题目中涉及集合立刻想到set</h3><ul>
<li>特点就是，一旦题目提到有序，无重复元素，立刻反应Set()</li>
</ul>
<h3 id="Set做了哪些事情"><a href="#Set做了哪些事情" class="headerlink" title="Set做了哪些事情"></a>Set做了哪些事情</h3><ul>
<li><p>给定一个数组</p>
<ul>
<li>返回一个没有重复序列的集合</li>
</ul>
</li>
</ul>
<h3 id="能做到什么"><a href="#能做到什么" class="headerlink" title="能做到什么"></a>能做到什么</h3><ul>
<li><p>数组去重</p>
<ul>
<li><p>首先通过，[…set(arry)]</p>
<ul>
<li>但是我对于这个有一些问题就是，首先通过…元素是否意思是将set数据结构转为数组，那如果已经是数组了为什么要在加上数组字面量不理解</li>
</ul>
</li>
</ul>
</li>
<li><p>求交集</p>
<ul>
<li>怎么做</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/09/15/HTML%E4%BD%93%E7%B3%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/09/15/HTML%E4%BD%93%E7%B3%BB/" class="post-title-link" itemprop="url">HTML</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-09-15 14:20:05" itemprop="dateCreated datePublished" datetime="2020-09-15T14:20:05+08:00">2020-09-15</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/html/" itemprop="url" rel="index"><span itemprop="name">html</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <!DOCTYPE html>
<h3 id="DOCTYPE"><a href="#DOCTYPE" class="headerlink" title="DOCTYPE"></a>DOCTYPE</h3><p>DOC 是 document 文档的意思，type 是类型的意思–也就是说<strong>告诉浏览器用什么规范渲染页面</strong></p>
<ol start="2">
<li><p>从这各点可以引入[“怪异模式”]</p>
<blockquote>
<h3 id="严格模式-怪异模式"><a href="#严格模式-怪异模式" class="headerlink" title="严格模式/怪异模式"></a>严格模式/怪异模式</h3><p><strong>Doctype 的作用？标准（严格）模式，怪异（混杂）模式的区别，它们的意义？</strong></p>
<ol>
<li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/ltt2017/archive/2017/04/28/6783787.html">严格模式怪异模式的理解</a>。</li>
<li>严格模式：按照最标准的格式，来进行页面布局&amp;渲染界面。&lt;! Doctype HTML&gt; Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML</li>
<li>怪异模式/混杂模式： 按各个浏览器的标准来，目的：兼容旧浏览器。//这个理解</li>
<li>我个人理解就是说这个之前有些浏览器不是按照 w3c 的要求来渲染的，这就导致了这个不同浏览器渲染机制不太一样为了能够一样。</li>
</ol>
</blockquote>
<p>。</p>
</li>
</ol>
<h3 id="严格模式-怪异模式-1"><a href="#严格模式-怪异模式-1" class="headerlink" title="严格模式/怪异模式"></a>严格模式/怪异模式</h3><p><strong>Doctype 的作用？标准（严格）模式，怪异（混杂）模式的区别，它们的意义？</strong></p>
<ol>
<li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/ltt2017/archive/2017/04/28/6783787.html">严格模式怪异模式的理解</a>。</li>
<li>严格模式：按照最标准的格式，来进行页面布局&amp;渲染界面。&lt;! Doctype HTML&gt; Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML</li>
<li>怪异模式/混杂模式： 按各个浏览器的标准来，目的：兼容旧浏览器。//这个理解</li>
<li>我个人理解就是说这个之前有些浏览器不是按照 w3c 的要求来渲染的，这就导致了这个不同浏览器渲染机制不太一样为了能够一样。</li>
</ol>
<h3 id="HTML5-新增属性"><a href="#HTML5-新增属性" class="headerlink" title="HTML5 新增属性"></a>HTML5 新增属性</h3><ol>
<li><strong>语义化</strong>元素，比如 footer、header、nav、section，用这些语义化除了有利于代码可读性，更重要的是有利于 seo 优化,简单来讲就是，有利于爬虫爬取数据。从而提升网站的排名。</li>
<li><strong>Localstorage:</strong> 数据永久存储在浏览器缓存里，除非人为删除我在做 JWT 鉴权时将 token 值用用 localstorage 存储，SessionStorage，session 会话，也就是说，一旦，浏览器关闭，缓存就会消失。</li>
<li><strong>data</strong>-src : 特点凡是用到了 data 的都是<strong>自定义属性</strong>： –》怎么用<strong>图片懒加载</strong>：就是当需要显示的时候才会通过 js 获取 data-src:里的真实地址，然后在赋值给 Img 里的 src;</li>
<li>canvas 画布</li>
<li>video audio ,嵌入视频和音频。更动感。</li>
</ol>
<h4 id="记忆方法"><a href="#记忆方法" class="headerlink" title="记忆方法"></a>记忆方法</h4><ol>
<li>我无（5）语（语义化）了（L），需要看好看的图片（data-src),画布（canves）和视频(audio)来缓解。</li>
</ol>
<h3 id="iframe。"><a href="#iframe。" class="headerlink" title="iframe。"></a>iframe。</h3><h4 id="叙述思路"><a href="#叙述思路" class="headerlink" title="叙述思路"></a>叙述思路</h4><ol>
<li>首先最重要的一点就是说会影响 <strong>seo</strong>，爬虫不识别</li>
<li>阻塞 Onload 事件。意思就是所有的，资源加载完毕，并且等待 iframe 页面加载完毕后才会去执行 onload，所以会阻塞。</li>
<li>影响并行加载，iframe 的页面和主页面在同一个域名下，他们之间是并行加载关系，而浏览器资源有限，所以影响。</li>
<li>怎么改善就是说通过 js 动态给 iframe 设置页面地址。</li>
</ol>
<h3 id="文档流"><a href="#文档流" class="headerlink" title="文档流"></a>文档流</h3><p>[文档流.emmx]</p>
<h3 id="如何来清除浮动"><a href="#如何来清除浮动" class="headerlink" title="如何来清除浮动"></a>如何来清除浮动</h3><ol>
<li>联想 clear，看见这个清除，联想 <strong>clear</strong></li>
<li>clear: both. //额外标签法，在最后一个浮动元素后，设置一个额外的标签然后，再去设置 clear:both //创造了额外标签，语义化不好。</li>
<li>清除元素，这个是最优的，因为，给父元素上用的，防止其高度塌陷伪元素独立于 dom 树之外，所以它不会去参与 dom 树的构建，```//它没有添加额外标签，也没有像这个 overflowhidden：有副作用。这个不要把::伪类元素给忘记了，就是这个就是模拟的这个，额外标签的方法，但是这个伪元素又是独立于文档树之外的。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> .clearfix ：：after&#123;</span><br><span class="line">content=&#x27;&#x27;;</span><br><span class="line">display: block; //类似于创造了一个额外的标签进行清除浮动，//并且由于这个伪元素是行内元素所以需要转为这个块级元素。</span><br><span class="line">clear:both;  //:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？</span><br><span class="line">我们添加一条IE 6的独有命令&quot;zoom:1;&quot;就行了，这条命令的作用是激活父元素的&quot;hasLayout&quot;属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。</span><br></pre></td></tr></table></figure></li>
<li>还有 overflow:hidden 原理是给父元素利用触发了 bfc 块， 它计算高度的时候是考虑浮动元素的高度的，所以可以去清除这个浮动。</li>
</ol>
<h3 id="a-标签的-4-个伪类的正确顺序，并解释"><a href="#a-标签的-4-个伪类的正确顺序，并解释" class="headerlink" title="a 标签的  4 个伪类的正确顺序，并解释"></a>a 标签的  4 个伪类的正确顺序，并解释</h3><ol>
<li>LVHA ：（层级覆盖的原理）就是:hover 必须要放最后，这样做能够确保让用户知道这个元素是可以访问的所以这个必须放在最后面。然后 link 就是有链接就有样式，:visited 为了区别这个链接是否被访问，这个放其后，a 和 h 的关系随意，一个是鼠标放上去，一个是点击，但是弹起中的触发，所以两者不会冲突。</li>
</ol>
<h3 id="bfc"><a href="#bfc" class="headerlink" title="bfc"></a>bfc</h3><ol>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/mevicky/article/details/47008939">bfc 理解</a>。</li>
<li>设置 BFC 时候，display 可以设置成什么</li>
</ol>
<h3 id="DOM-事件体系，冒泡"><a href="#DOM-事件体系，冒泡" class="headerlink" title="DOM 事件体系，冒泡"></a>DOM 事件体系，冒泡</h3><ol>
<li>哪些事件没有冒泡：不支持冒泡：妈（mouseenter）妈(mouseleave)不(blur)放(focus)心你(unload,load,resize)。</li>
<li>事件委托就是依赖于，捕获冒泡的原理来解决这个问题的，通过不断的冒泡 [DOM 事件体系，及冒泡事件委托.emmx]</li>
</ol>
<h3 id="meta-标签"><a href="#meta-标签" class="headerlink" title="meta 标签"></a>meta 标签</h3><h3 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h3><ol>
<li>凡是布局首先应该联想到这个，浮动，flex 定位，bfc。</li>
</ol>
<h4 id="两栏布局"><a href="#两栏布局" class="headerlink" title="两栏布局"></a>两栏布局</h4><ol>
<li>左列定宽，右列自适应，定位，就是右边的定位为 left 为左边定宽的距离，上右都为 0 这样就可以了。</li>
<li>flex 就是父级 flex 布局，然后，flex- grow =1 就可以让剩余的元素来，填充剩下的内容。</li>
<li>浮动布局–》当需要两个元素同属一行的时候就应该想到然后，就是块级元素默认是 100% 宽度，所以只让左定宽元素去浮动，右元素仅仅去设置左边距，本身就是 100% 宽度。</li>
</ol>
<h4 id="三栏布局"><a href="#三栏布局" class="headerlink" title="三栏布局"></a>三栏布局</h4><ol>
<li><p>左右两列定宽，右列自适应。就可以利用[“BFC 块”</p>
<blockquote>
<h3 id="BFC-块-IFC"><a href="#BFC-块-IFC" class="headerlink" title="BFC 块 /IFC"></a>BFC 块 /IFC</h3><h4 id="为什么设置-over-flow-hidden-可以清除浮动"><a href="#为什么设置-over-flow-hidden-可以清除浮动" class="headerlink" title="为什么设置 over-flow:hidden,可以清除浮动"></a>为什么设置 over-flow:hidden,可以清除浮动</h4><ol>
<li>要了解 bfc 块，内部的块级元素会垂直摆放，同属于一个 bfc 块会发生 margin 重叠，那么消除这样的 bug 就可以给其中一个元素在套一个容器让他成为令一个新的 bfc 块（还要设置一个 over-flow:hidden).</li>
<li>给父元素加了一个 over-flow:hidden 就是为了使用 bfc 块的特性：在计算 bfc 块的高度时会计算里面浮动元素的高度，这样看上去就把浮动元素包裹了起来。</li>
<li>注意一下如何使用 BFC 消除 margin 重叠，</li>
<li>首先你要去明确就是重叠这个现象只出现在垂直的方向，水平方向是没有的</li>
<li>overflow:hidden;bfc 块的特性就是，紧贴浮动元素，所以直接就在两边。也可以用来去做这个浮动元素。</li>
<li><strong>可以触发 BFC</strong> 的属性有 float、position、overflow、display：table-cell/ inline-block/table-caption</li>
</ol>
<h4 id="IFC"><a href="#IFC" class="headerlink" title="IFC"></a>IFC</h4><ol>
<li>IFC（Inline formatting contexts）：<strong>内联格式上下文</strong> IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。 那么 IFC 一般有什么用呢？ <strong>水平居中</strong>：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。 <strong>垂直居中</strong>：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。</li>
</ol>
</blockquote>
<p> 的特点：紧贴着浮动的元素，</p>
</li>
<li><p>就是定义页面元信息，告诉机器如何渲染页面的，方便搜索引擎，有利于 seo 优化的。</p>
</li>
<li><p>比如 name:viewport 移动端布局的，告诉机器如何来渲染界面。</p>
</li>
<li><p>比如申明文档的编码格式为 UTF-8 等。</p>
</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/09/12/%E7%9B%92%E6%A8%A1%E5%9E%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/09/12/%E7%9B%92%E6%A8%A1%E5%9E%8B/" class="post-title-link" itemprop="url">盒模型</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-09-12 22:20:47" itemprop="dateCreated datePublished" datetime="2020-09-12T22:20:47+08:00">2020-09-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/css/" itemprop="url" rel="index"><span itemprop="name">css</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <p>首先盒模型有几个属性分别是content  border padding margin </p>
<p>盒模型有两种标准，</p>
<p>1：第一种是w3c（万维网联盟）</p>
<p>首先盒模型有几个属性分别是content  border padding margin ;</p>
<p>它的宽高的计算是包含了border的</p>
<p>第二种：是传统的ie浏览器模型：</p>
<p>也有几个属性分别是content （特殊点就是内容包含了内边距和border） border padding margin ;</p>
<p>但是其元素宽高的计算是包含了border</p>
<p>什么意思，就是说我可以并排的展示两个加上border超出了容器的元素；再具体就是元素的宽高既包含元素本身，还包含了其内部的边框与内边距；</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/08/19/TCP/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/08/19/TCP/" class="post-title-link" itemprop="url">TCP</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-08-19 15:20:05" itemprop="dateCreated datePublished" datetime="2020-08-19T15:20:05+08:00">2020-08-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/TCP/" itemprop="url" rel="index"><span itemprop="name">TCP</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h2><h3 id="如何来理解-tcp-是面向流的"><a href="#如何来理解-tcp-是面向流的" class="headerlink" title="如何来理解 tcp 是面向流的"></a>如何来理解 tcp 是面向流的</h3><ol>
<li><p>所谓的流就是说无<a href="siyuan://blocks/20210130110417-7sbw2pb">“消息保护边界的”</a></p>
<blockquote>
<ol>
<li>由于 tcp 无消息保护边界，（个人理解就是不知道消息从哪里开始，也不知道消息从哪里结束）需要在接收端来处理消息边界问题，这也就是说粘包，拆包问题。</li>
<li>什么是粘包，就是说有可能两个信息包，粘在了一起</li>
<li>有些包被拆成几块因为大于了 MSS,所以需要拆包，，然后与其它包粘在一起。</li>
</ol>
</blockquote>
<p>，这里通俗理解就是说接受方无法去界定这个消息的开始和结尾，而有消息保护边界就是说消息之间是独立的，因为消息与消息之间有边界。</p>
</li>
</ol>
<h3 id="过程"><a href="#过程" class="headerlink" title="过程"></a>过程</h3><ol>
<li>首先（先联想图）客户端向服务器发出序列号 SYN ，seq（随机发出一个序列号）</li>
<li>服务器收到后会基于客户端的序列号，发出一个 ACK 确认号。为了表示一个回礼，还需要发 Seq</li>
<li>客户端会再次对服务器的序列号产生一个确认。</li>
</ol>
<h3 id="为什么建立连接是三次，而不是两次。"><a href="#为什么建立连接是三次，而不是两次。" class="headerlink" title="为什么建立连接是三次，而不是两次。"></a>为什么建立连接是三次，而不是两次。</h3><h4 id="防止历史请求初始化-tcp-连接"><a href="#防止历史请求初始化-tcp-连接" class="headerlink" title="防止历史请求初始化 tcp 连接"></a>防止历史请求初始化 tcp 连接</h4><ol>
<li><strong>反向验证两次为什么不行</strong>：如果只有两次，客户端这里对于服务器发来的报文，无法来判断这个报文是否有效（是否过期，是否超时）因为网路拥塞这样的事情很常见。</li>
<li>所以客户端这里没有足够的<strong>上下文</strong>来判断，是否是如期的请求。</li>
<li>此时从三次说，那为什么三次避免了这样的问题，当客户端收到服务器的请求的时候，<strong>客户端</strong>本身会<strong>存储</strong>自己所发出的<strong>序列号</strong>，所以可以依据所收到的 ack 来判断是否是如期的，如果是就正常连接。</li>
<li>但如果不是，那就发送 <strong>RST</strong> （有重置的意思）报文，来结束这个连接。</li>
</ol>
<h4 id="确认彼此的系列号"><a href="#确认彼此的系列号" class="headerlink" title="确认彼此的系列号"></a>确认彼此的系列号</h4><ol>
<li>其实 tcp 能够实现可靠连接的本质其实是能够确认彼此的序列号，那你如果只有两次，只能单向确认，无法互相确认，所以需要三次。</li>
</ol>
<h4 id="防止（服务器）资源浪费"><a href="#防止（服务器）资源浪费" class="headerlink" title="防止（服务器）资源浪费"></a>防止（服务器）资源浪费</h4><ol>
<li>由于仅有两次，服务器是没有办法判断对方是否收到了正确的序号</li>
<li>客户端如果因为网路阻塞，发出了多个 SYN 信号，那客户端有可能收到，也有可能收不到，所以为了确保对方收到，服务器只能建立多个重复的 tcp 链接。极大的浪费资源。</li>
</ol>
<h4 id="TCP-四次挥手"><a href="#TCP-四次挥手" class="headerlink" title="TCP 四次挥手"></a>TCP 四次挥手</h4><ol>
<li>（首先看到<strong>四</strong>先想想哪四次，<strong>两对 FIN-ACK</strong> ，为什么一定要四次，就是说客户端向服务器先发 FIN 表示两个人关系淡了想分了，所以<strong>发出 FIN 终止报文</strong>。</li>
<li>服务区器先对终止报文发出确认</li>
<li>但服务器收到还可能对收到的信进行处理并发送，意味着此时不能立刻终止关系。</li>
<li>在处理完信息后再去发出 FIN，自身进入 closed 状态。</li>
<li>客户端收到信息后再次，向服务器发出一个 ACK,后它不会立刻进入到 closed 状态，它需要等待两个 <strong>MSL</strong>（最大报文生存时间）为什么是两个主要是因为网络时常会发生阻塞，对方没有收到一个 ACK,客户端会重发，那么重发之后一个来回就对应了两个 MSL。第二个原因：<a target="_blank" rel="noopener" href="https://blog.csdn.net/LF_2016/article/details/60468161">防止历史报文骚扰服务器</a>。</li>
<li><a target="_blank" rel="noopener" href="http://www.bubuko.com/infodetail-3143286.html">易理解第二个原因</a></li>
<li>补充：TIME——wait 等待过程。</li>
</ol>
<h3 id="TCP-流量控制"><a href="#TCP-流量控制" class="headerlink" title="TCP 流量控制"></a>TCP 流量控制</h3><h5 id="客户端和服务端控制滑动窗口的过程是怎样的。"><a href="#客户端和服务端控制滑动窗口的过程是怎样的。" class="headerlink" title="客户端和服务端控制滑动窗口的过程是怎样的。"></a>客户端和服务端控制滑动窗口的过程是怎样的。</h5><ol>
<li>首先滑动窗口受限于接收方的接收能力大小，就是发送方每发送数据后，服务器就会去移动滑动窗口的指针，之后可用窗口会减小，并且会将当前可用窗口的大小发送给客户端，用来控制发送方发送的数据量以达到，流量控制。</li>
</ol>
<p><strong>讲述思路：</strong></p>
<ol>
<li>首先想到滑动窗口首先<strong>联想接收方有一个滑动窗口</strong>，也就是说这个主要是和接收方有关，防止对方发送的数据超出了接收方的数据。</li>
</ol>
<h5 id="发送窗口和接收窗口分别由哪些构成"><a href="#发送窗口和接收窗口分别由哪些构成" class="headerlink" title="发送窗口和接收窗口分别由哪些构成"></a>发送窗口和接收窗口分别由哪些构成</h5><ol>
<li>发送窗口：由<strong>发送</strong>想到了<strong>已发送</strong>到并得到确认的字段区域，那有得到确认的自然还有<strong>没有接收到确认的</strong>，<strong>可用窗口</strong>，那由于自身肯定还有好多数据好多话想告诉接收方所以自然还会有许多数据等待发送，但是这个会超出对方的接收范围。也就 是<strong>不可用窗口</strong>。（两个发送，可不可以）4 个</li>
<li>接收方窗口：已经接受到的数据并确认，<strong>理解有一个误区就是说接收方没有接收到数据但是没有得到确认的</strong>，发送方有是因为它自己是发送数据的，接收到的 ack 是有可能阻塞的，未确认，接收方不考虑这个，只管接收就好。<strong>还有未接收到，并是可接受范围内</strong>，<strong>未接收但是，超出了可用窗口大小的区域</strong>。（三个）</li>
</ol>
<h5 id="滑动窗口和拥塞窗口有什么区别"><a href="#滑动窗口和拥塞窗口有什么区别" class="headerlink" title="滑动窗口和拥塞窗口有什么区别"></a>滑动窗口和拥塞窗口有什么区别</h5><ol>
<li>由拥塞想到了网络拥塞，也就是说主要应用于解决网络拥塞问题的，主要由发送方控制，防止它发多了导致了网络拥塞。</li>
<li>而滑动窗口主要是因为解决防止发送方数据量超过了接收方的能力，也就是说其大小取决于接收方。</li>
</ol>
<h3 id="tcp流量控制"><a href="#tcp流量控制" class="headerlink" title="tcp流量控制"></a>tcp流量控制</h3><ol>
<li><p>流量控制依赖于<strong>滑动窗口</strong>来控制发送方发送的速率不要太快（联想一个窗口，里面有有两个指针，然后再作答）</p>
</li>
<li><p>你怎么理解这个窗口就是缓存区的<strong>剩余</strong>大小，只有收到确认才能将已经发送的数据进行发送。</p>
</li>
<li><p>所谓的流量控制其实就是面试以服务端发送举例子（此时假定发送窗口可接收窗口都不变的情况），客户端接收做例子，这里我概括说就是，每当服务器发送完数据后，相应的可用窗口大小就会减少，相对应的指针也会发送变化，就是 snd.next 指向的是<strong>可用窗口</strong>大小的头指针，右移，当收到了对方的<strong>确认</strong>后，自生的 snd.una 也会右移，那么此时可用窗口大小自然增大。</p>
</li>
<li><p>此时接收方再接收到信息后 rsv.next,也会发送移动，如果发送方的数据超过了其可用窗口就会导致窗口关闭也就是说起到了<strong>流量控制</strong>。在接收到接收方的确认后才可以据悉的发送数据。</p>
</li>
<li><p>实际上如果应用层没有及时的读取缓存区里的数据就会导致，每次接收方接收到数据后，其<strong>接收</strong>窗口大小会变得更小，并且会将这个大小以 <strong>window 字段</strong>来告诉，发送方来达到流量控制，以此控制发送方的速率。</p>
</li>
<li><p>但是窗口大小其实会动态变化的，如果先减少了接收缓存区，又收缩了窗口，最终没有多余接收缓存，可以接收数据，就会导致丢包，那为了解决这个问题，就是先<strong>来收缩窗口</strong>，再去<strong>减少</strong>接收缓存。（这里就是说这个，窗口）</p>
</li>
<li><p>窗口局面就是说如果说在窗口关闭后，应用应用进程如果没有及时读取缓冲区里的数据会导致窗口收缩，</p>
</li>
<li><p>那么在窗口关闭后应用进程及时读取消息，就会恢复其接收窗口大小，并且会通知发送方以 window 字段，但是这里有一个问题就是，如果这个消息丢失了，就会导致，<strong>死锁</strong>现象。</p>
</li>
<li><p><strong>坚持定时器</strong>，就是一旦接收方窗口大小变为 0 就会启动，并每隔一段时间来进行探测报文探测对方目前可用窗口大小，这样就可以来避免死锁了。</p>
</li>
</ol>
<h3 id="糊涂窗口"><a href="#糊涂窗口" class="headerlink" title="糊涂窗口"></a>糊涂窗口</h3><ol>
<li>糊涂窗口就是为了<strong>避免</strong>发送方发送<strong>小数据</strong>，因为 tcp ip 头部太大为了发送小数据而导致资源浪费。</li>
<li>一般采取 Nagle 算法来解决就是通过这个 1：只有当窗口值<strong>大于 MSS</strong>，的长度，以及收到之前数据的<strong>确认</strong>之前，一直再囤积想要发送的数据。</li>
</ol>
<h3 id="拥塞控制（联想折线上升图）"><a href="#拥塞控制（联想折线上升图）" class="headerlink" title="拥塞控制（联想折线上升图）"></a>拥塞控制（联想折线上升图）</h3><ol>
<li>首先来复盘一下自己的知识点，就是首先由拥塞想到了为什么拥塞窗口也就是说 crwd,</li>
<li>那么也就是说所谓的拥塞窗口主要是来解决网络拥塞的。</li>
<li>那么首先达到慢启动阶段，以指数增加。<a target="_blank" rel="noopener" href="https://blog.csdn.net/linweixuan/article/details/4353015">慢启动为什么是指数增加</a>。</li>
<li>之后到达了门限值，之后进入了拥塞避免阶段，每接收到一个 ack 就拥塞窗口加拥塞窗口分之一。线性增加</li>
<li>但是还是会拥塞，先有超时重传，门限值减半，拥塞窗口初始化为 1</li>
<li>还有一种就是快重传会接收到三个重复的 ack，cwnd 减半，然后门限值为拥塞窗口一半，到达快恢复后，其拥塞窗口在此基础上加三（三个重复的 ack）。</li>
</ol>
<h3 id="粘包拆包问题"><a href="#粘包拆包问题" class="headerlink" title="粘包拆包问题"></a>粘包拆包问题</h3><h3 id="tcp-粘包，"><a href="#tcp-粘包，" class="headerlink" title="tcp 粘包，"></a>tcp 粘包，</h3><ol>
<li>由于 tcp 无消息保护边界，（个人理解就是不知道消息从哪里开始，也不知道消息从哪里结束）需要在接收端来处理消息边界问题，这也就是说粘包，拆包问题。</li>
<li>什么是粘包，就是说有可能两个信息包，粘在了一起</li>
<li>有些包被拆成几块因为大于了 MSS,所以需要拆包，，然后与其它包粘在一起。</li>
</ol>
<h3 id="为什么会出现这个奇怪的现象"><a href="#为什么会出现这个奇怪的现象" class="headerlink" title="为什么会出现这个奇怪的现象"></a>为什么会出现这个奇怪的现象</h3><ol>
<li>对于接受方就是，<strong>接受数据到缓存的</strong>速率<strong>大于</strong>了<strong>应用进程读取数据</strong>的速率，就会导致多个包粘连在一起。</li>
<li>发送方的 Nagel 算法。导致出现了在接收到一个确认后，收集多个分组数据再去发送。/粘包。</li>
</ol>
<p>怎么解决这个问题</p>
<ol>
<li>发送方 去关闭 nagel 算法。</li>
<li>由于接收方不清楚，一个完整消息的大小，所以发送端会给数据包，<strong>添加一个包首部</strong>，这个首部，会<strong>包含数据包的长度</strong>，这样接收方通过首部消息就可以知道了类似于有了消息边界。</li>
<li>发送端将每个数据包大小固定，这样接收方就可以知道这个了。</li>
<li>也可以在<strong>数据包之间设置边界</strong>，如添加特殊的符号，接收方就可以清楚一个完整数据包的大小了。</li>
</ol>
<h3 id="tcp-重传机制"><a href="#tcp-重传机制" class="headerlink" title="tcp 重传机制"></a>tcp 重传机制</h3><ol>
<li>D-SACK<br>[http tcp](assets/http tcp.pdf?page=65).</li>
</ol>
<h3 id="tcp-的包一定是按照顺序的吗"><a href="#tcp-的包一定是按照顺序的吗" class="headerlink" title="tcp 的包一定是按照顺序的吗"></a>tcp 的包一定是按照顺序的吗</h3><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/jiujiu372/article/details/76855199">tcp 的包一定是按照顺序的吗</a></p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/07/19/websocket/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/07/19/websocket/" class="post-title-link" itemprop="url">websocket</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-07-19 14:20:05" itemprop="dateCreated datePublished" datetime="2020-07-19T14:20:05+08:00">2020-07-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/HTTP/" itemprop="url" rel="index"><span itemprop="name">HTTP</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="websocket"><a href="#websocket" class="headerlink" title="websocket"></a>websocket</h1><h2 id="它解决了http是半双工，实现了服务端推送"><a href="#它解决了http是半双工，实现了服务端推送" class="headerlink" title="它解决了http是半双工，实现了服务端推送"></a>它解决了http是半双工，实现了服务端推送</h2><h3 id="也就是说客户端和服务器之间无法，随意互相发送数据，只能是客户端，发，服务器去接受，服务器无法主动发送数据，只能是被动的"><a href="#也就是说客户端和服务器之间无法，随意互相发送数据，只能是客户端，发，服务器去接受，服务器无法主动发送数据，只能是被动的" class="headerlink" title="也就是说客户端和服务器之间无法，随意互相发送数据，只能是客户端，发，服务器去接受，服务器无法主动发送数据，只能是被动的"></a>也就是说客户端和服务器之间无法，随意互相发送数据，只能是客户端，发，服务器去接受，服务器无法主动发送数据，只能是被动的</h3><h2 id="那为了能够实现类似全双工的效果，http做出了哪些努力，"><a href="#那为了能够实现类似全双工的效果，http做出了哪些努力，" class="headerlink" title="那为了能够实现类似全双工的效果，http做出了哪些努力，"></a>那为了能够实现类似全双工的效果，http做出了哪些努力，</h2><h3 id="轮询"><a href="#轮询" class="headerlink" title="轮询"></a>轮询</h3><ul>
<li>其实就是说，客户端会向服务器不断的发送询问，问是否有新的数据，那么很明显这样做，效率非常的低</li>
</ul>
<h3 id="长轮询"><a href="#长轮询" class="headerlink" title="长轮询"></a>长轮询</h3><ul>
<li>意思就是说只有对方有数据才会发，每次客户端仅在接受到新数据才会去询问，如果，没有那就不询问了</li>
</ul>
<h2 id="那么websocket是怎么来建立连接的（握手）"><a href="#那么websocket是怎么来建立连接的（握手）" class="headerlink" title="那么websocket是怎么来建立连接的（握手）"></a>那么websocket是怎么来建立连接的（握手）</h2><h3 id="其实首先初始本质就是一个http的get-请求（之所以这样做其实是为了能够，绕过浏览器，防火墙的限制，因为这样做，但是这里为了能够告诉服务器其实并不是http协议，会加入两个字段：并且还会加入一些验证消息，目的就是为了能够防止误连接"><a href="#其实首先初始本质就是一个http的get-请求（之所以这样做其实是为了能够，绕过浏览器，防火墙的限制，因为这样做，但是这里为了能够告诉服务器其实并不是http协议，会加入两个字段：并且还会加入一些验证消息，目的就是为了能够防止误连接" class="headerlink" title="其实首先初始本质就是一个http的get 请求（之所以这样做其实是为了能够，绕过浏览器，防火墙的限制，因为这样做，但是这里为了能够告诉服务器其实并不是http协议，会加入两个字段：并且还会加入一些验证消息，目的就是为了能够防止误连接"></a>其实首先初始本质就是一个http的get 请求（之所以这样做其实是为了能够，绕过浏览器，防火墙的限制，因为这样做，但是这里为了能够告诉服务器其实并不是http协议，会加入两个字段：并且还会加入一些验证消息，目的就是为了能够防止误连接</h3><h3 id="建立了连接，并且确认了就是websocket协议，之后客户端和服务器之间就可以随意互发信息了"><a href="#建立了连接，并且确认了就是websocket协议，之后客户端和服务器之间就可以随意互发信息了" class="headerlink" title="建立了连接，并且确认了就是websocket协议，之后客户端和服务器之间就可以随意互发信息了"></a>建立了连接，并且确认了就是websocket协议，之后客户端和服务器之间就可以随意互发信息了</h3><h2 id="这个协议更多的是对http的一种优化"><a href="#这个协议更多的是对http的一种优化" class="headerlink" title="这个协议更多的是对http的一种优化"></a>这个协议更多的是对http的一种优化</h2><h2 id="二进制帧格式？"><a href="#二进制帧格式？" class="headerlink" title="二进制帧格式？"></a>二进制帧格式？</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/07/12/css/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/07/12/css/" class="post-title-link" itemprop="url">垃圾回收机制</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-07-12 10:20:05" itemprop="dateCreated datePublished" datetime="2020-07-12T10:20:05+08:00">2020-07-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/css/" itemprop="url" rel="index"><span itemprop="name">css</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="css"><a href="#css" class="headerlink" title="css"></a>css</h1><h2 id="盒模型宽度如何计算"><a href="#盒模型宽度如何计算" class="headerlink" title="盒模型宽度如何计算"></a>盒模型宽度如何计算</h2><h3 id="offeset"><a href="#offeset" class="headerlink" title="offeset"></a>offeset</h3><ul>
<li>Subtopic</li>
</ul>
<h3 id="client"><a href="#client" class="headerlink" title="client"></a>client</h3><ul>
<li>子主题</li>
</ul>
<h3 id="盒模型计算"><a href="#盒模型计算" class="headerlink" title="盒模型计算"></a>盒模型计算</h3><ul>
<li><p>标准盒模型</p>
<ul>
<li>box-sizing: content:box</li>
</ul>
</li>
<li><p>怪异盒模型（ie）</p>
<ul>
<li>box-sizing: borderbox</li>
<li>应用边界问题</li>
</ul>
</li>
</ul>
<h2 id="margin-纵向重叠"><a href="#margin-纵向重叠" class="headerlink" title="margin-纵向重叠"></a>margin-纵向重叠</h2><h3 id="在练习布局的时候经常会有这个问题，就是说，上下元素的margin-会发生重叠"><a href="#在练习布局的时候经常会有这个问题，就是说，上下元素的margin-会发生重叠" class="headerlink" title="在练习布局的时候经常会有这个问题，就是说，上下元素的margin 会发生重叠"></a>在练习布局的时候经常会有这个问题，就是说，上下元素的margin 会发生重叠</h3><h3 id="再具体来讲就是margin-top-margin-bottom-margin-top-bottom"><a href="#再具体来讲就是margin-top-margin-bottom-margin-top-bottom" class="headerlink" title="再具体来讲就是margin-top+margin-bottom !== margin(top+bottom)"></a>再具体来讲就是margin-top+margin-bottom !== margin(top+bottom)</h3><h3 id="所谓的重叠就是纵方向的margin会重叠在一起取值最大的margin"><a href="#所谓的重叠就是纵方向的margin会重叠在一起取值最大的margin" class="headerlink" title="所谓的重叠就是纵方向的margin会重叠在一起取值最大的margin"></a>所谓的重叠就是纵方向的margin会重叠在一起取值最大的margin</h3><h3 id="怎么来解决这个问题"><a href="#怎么来解决这个问题" class="headerlink" title="怎么来解决这个问题"></a>怎么来解决这个问题</h3><h2 id="margin负值"><a href="#margin负值" class="headerlink" title="margin负值"></a>margin负值</h2><h3 id="这里联想一个图，就是，有上下左右四个边距，然后，向上和左元素自身会发生移动，对于下和右就是相应位置将不占高和宽，自身不会变动。换言之其它元素会进行移动占据其空缺位置。"><a href="#这里联想一个图，就是，有上下左右四个边距，然后，向上和左元素自身会发生移动，对于下和右就是相应位置将不占高和宽，自身不会变动。换言之其它元素会进行移动占据其空缺位置。" class="headerlink" title="这里联想一个图，就是，有上下左右四个边距，然后，向上和左元素自身会发生移动，对于下和右就是相应位置将不占高和宽，自身不会变动。换言之其它元素会进行移动占据其空缺位置。"></a>这里联想一个图，就是，有上下左右四个边距，然后，向上和左元素自身会发生移动，对于下和右就是相应位置将不占高和宽，自身不会变动。换言之其它元素会进行移动占据其空缺位置。</h3><h2 id="BFC"><a href="#BFC" class="headerlink" title="BFC"></a>BFC</h2><h3 id="块级格式化上下文"><a href="#块级格式化上下文" class="headerlink" title="块级格式化上下文"></a>块级格式化上下文</h3><h3 id="独立的容器"><a href="#独立的容器" class="headerlink" title="独立的容器"></a>独立的容器</h3><h3 id="解决"><a href="#解决" class="headerlink" title="解决"></a>解决</h3><ul>
<li>margin纵向重叠的问题</li>
<li>还有就是三栏布局（两列定宽）中间自适应，中间元素，加入overflow:hidden；就可以解决这个问题，因为独立容器就是紧贴着浮动的元素。这里没有必要去给父元素设置，因为浮动元素设置，是为了计算子元素的宽高的。</li>
<li>清除浮动，原理就是bfc块是计算浮动元素高度的。</li>
</ul>
<h3 id="怎么来触发"><a href="#怎么来触发" class="headerlink" title="怎么来触发"></a>怎么来触发</h3><ul>
<li><p>浮动</p>
</li>
<li><p>非overflow: visible</p>
</li>
<li><p>定位元素：absolute, fix 首先都会脱离文档流</p>
<ul>
<li>区别：absolute相对于最近的非staic定位元素进行定位也就是说定位元素，而fix是定死在浏览器窗口内不会随着滚动条的滚动而滚动</li>
</ul>
</li>
<li><p>flex元素就是设置了display；flex布局的元素</p>
</li>
</ul>
<h3 id="联想一个场景，就是两个元素，就是上下margin重叠，并且，还有一个场景就是一个容器因为子容器浮动而高度塌陷。"><a href="#联想一个场景，就是两个元素，就是上下margin重叠，并且，还有一个场景就是一个容器因为子容器浮动而高度塌陷。" class="headerlink" title="联想一个场景，就是两个元素，就是上下margin重叠，并且，还有一个场景就是一个容器因为子容器浮动而高度塌陷。"></a>联想一个场景，就是两个元素，就是上下margin重叠，并且，还有一个场景就是一个容器因为子容器浮动而高度塌陷。</h3><h2 id="Float布局"><a href="#Float布局" class="headerlink" title="Float布局"></a>Float布局</h2><h3 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h3><ul>
<li><p>这里有个之前忽略的点就是用</p>
<ul>
<li>clear:both来清楚浮动</li>
</ul>
</li>
<li><p>这里有一个之前没有搞清楚的一点就是：这里用到了margin负值</p>
<ul>
<li>如果你给一个浮动元素，负值且为100%的话，它其实是相对于父元素的，去向左来位移的</li>
</ul>
</li>
<li><p>加深了对于position:relative理解</p>
<ul>
<li><p>这个是相对于自身来定位的什么意思就是说，当给一个设置lerelative的元素设置了top,left,right,时它会相对于自身左上角那个顶点进行移动</p>
</li>
<li><p>之前一直只是单纯用子绝父相，很少来单独的使用，relative</p>
</li>
<li><p>它的移动不会去干扰其它的布局元素也就是说，加了realtive的元素相当于不存在一样，它干扰不了其它布局的元素，其它元素的布局该是啥就是啥</p>
<ul>
<li>但我这里有一个问题就是到底，脱流的元素是否会被影响，我看中间的center 会被影响</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="双飞翼布局"><a href="#双飞翼布局" class="headerlink" title="双飞翼布局"></a>双飞翼布局</h3><ul>
<li><p>原因</p>
<ul>
<li>中间元素优先取渲染因为优先级更高一些</li>
</ul>
</li>
</ul>
<h3 id="为什么用"><a href="#为什么用" class="headerlink" title="为什么用"></a>为什么用</h3><h3 id="主要用于pc"><a href="#主要用于pc" class="headerlink" title="主要用于pc"></a>主要用于pc</h3><h2 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h2><h3 id="联想：clear-清除"><a href="#联想：clear-清除" class="headerlink" title="联想：clear(清除)"></a>联想：clear(清除)</h3><h3 id="clear-both-额外标签法：就是给最后一个浮动元素后添加额外的标签，然后再去clear-both"><a href="#clear-both-额外标签法：就是给最后一个浮动元素后添加额外的标签，然后再去clear-both" class="headerlink" title="clear:both 额外标签法：就是给最后一个浮动元素后添加额外的标签，然后再去clear:both"></a>clear:both 额外标签法：就是给最后一个浮动元素后添加额外的标签，然后再去clear:both</h3><h3 id="overflow-hidden"><a href="#overflow-hidden" class="headerlink" title="overflow:hidden"></a>overflow:hidden</h3><h3 id="clear-fix"><a href="#clear-fix" class="headerlink" title="clear:fix"></a>clear:fix</h3><ul>
<li>原理类似于这个clear:both,先创建一个空元素，然后再去转换为块级元素，因为伪元素是一个行内元素，类似额外标签，但是内容是空的，然后再去清除浮动。</li>
<li>content: ‘ ‘</li>
<li>dispaly: block</li>
<li>clear:both</li>
</ul>
<h2 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h2><h3 id="哪些属性"><a href="#哪些属性" class="headerlink" title="哪些属性"></a>哪些属性</h3><ul>
<li><p>flex-direction</p>
<ul>
<li>子元素布局方向要么raw column</li>
</ul>
</li>
<li><p>justify-content</p>
<ul>
<li>space-between</li>
<li>Subtopic</li>
</ul>
</li>
<li><p>align-item</p>
</li>
<li><p>wrap</p>
</li>
<li><p>align-self</p>
<ul>
<li>按照当前主轴方向的垂直方向进行排列</li>
<li>center</li>
<li>start</li>
<li>end</li>
</ul>
</li>
</ul>
<h3 id="怎么形成弹性布局"><a href="#怎么形成弹性布局" class="headerlink" title="怎么形成弹性布局"></a>怎么形成弹性布局</h3><h2 id="垂直水平居中"><a href="#垂直水平居中" class="headerlink" title="垂直水平居中"></a>垂直水平居中</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/02/13/%E6%9A%82%E6%97%B6%E6%80%A7%E6%AD%BB%E5%8C%BA/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/02/13/%E6%9A%82%E6%97%B6%E6%80%A7%E6%AD%BB%E5%8C%BA/" class="post-title-link" itemprop="url">暂时性死区</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-02-13 20:22:00" itemprop="dateCreated datePublished" datetime="2020-02-13T20:22:00+08:00">2020-02-13</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/js%E6%A0%B8%E5%BF%83/" itemprop="url" rel="index"><span itemprop="name">js核心</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h3 id="何为暂时性死区"><a href="#何为暂时性死区" class="headerlink" title="何为暂时性死区"></a>何为暂时性死区</h3><ol>
<li>首先说起这个问题，首先需要来明确一下这个var let const 的一些本质的一个区别，首先对于这个var 会有一个变量提升的问题，其实这个变量从未提升过，从执行上下文的角度来考虑，问题，首先创建的阶段对于你所声明的变量，会去开辟空间，然后到达执行阶段才去赋值，因为创建阶段先给变量赋值为undefined，，但是又由于js解释执行的时候是在之后，才有值所以是undefined.所以它的本质其实就是这个，全局执行上下文创建阶段和执行阶段两者不同步所造成的。</li>
<li>那么这个var同时还没有作用域的概念，所以在闭包常见题种循环输出只能拿到最后一次遍历的值，因为一旦用var来声明变量，首先这个var会被提升至全局，因为它没有作用域的这个概念，然后每次遍历这个var都是唯一的所以，不断被刷新了。</li>
<li>那么这个let const 就是说let 之所以没有变量提升的问题在于它将全局执行上下文的创建阶段和执行阶段都同步了，所以才不会出现这个，问题，并且添加了块级作用域的概念，也就是说，每次声明一个变量都会将其绑定到当前作用域内比如在函数中去。</li>
<li>const 就是声明的变量，不能被重新赋值，对于简单值类型，不能被重复改变值，但是对于引用类型的值，只要不改它的地址，可以修改比如对象里的值。</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">John Doe</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener" target="_blank">NexT.Pisces</a>
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  




  





</body>
</html>
